<template>
  <div class="person">
    <div class="topBg"></div>
    <div class="topCard">
      <p>
        <span @click="toSeflInfo">
          <img :src="userInfo.avatar" alt />
          <span class="mobile">{{userInfo.nickname}}</span>
          <van-icon name="edit" color="#FD8346" size="15" />
        </span>
        <span>去约课</span>
      </p>
      <p class="message">
        <span>
          <p>0</p>
          <p>我的特色课</p>
          <p>已购特色课程的学习</p>
        </span>
        <span>
          <p>0</p>
          <p>我的特色课</p>
          <p>已购特色课程的学习</p>
        </span>
        <span>
          <p>0</p>
          <p>我的特色课</p>
          <p>已购特色课程的学习</p>
        </span>
      </p>
    </div>
    <div class="centerLink">
        <van-icon name="gift-o" size="20" />
        <span>
            <p>邀请好友注册APP，享多重好礼</p>
            <p>显示特惠，多邀多得</p>
        </span>
        <van-icon name="arrow" size="20" />
    </div>
    <div class="item">
        <p>课程相关</p>
        <div>
            <div>
                <van-icon size="18" name="" color="" />
                <span>关注的老师</span>
            </div>
            <div>
                <van-icon size="18" name="" />
                <span>我的收藏</span>
            </div>
        </div>
    </div>
    <div class="item">
        <p>订单相关</p>
        <div>
            <div>
                <van-icon size="18" name="" color="" />
                <span>课程订单</span>
            </div>
            <div>
                <van-icon size="18" name="" />
                <span>会员订单</span>
            </div>
            <div>
                <van-icon size="18" name="" />
                <span>约课订单</span>
            </div>
        </div>
    </div>
    <div class="item">
        <p>我的账户</p>
        <div>
            <div>
                <van-icon size="18" name="" color="" />
                <span>优惠券</span>
            </div>
            <div>
                <van-icon size="18" name="" />
                <span>学习卡</span>
            </div>
            <div>
                <van-icon size="18" name="" />
                <span>会员</span>
            </div>
        </div>
    </div>
    <div class="item">
        <p>自助服务</p>
        <div>
            <div>
                <van-icon size="18" name="" color="" />
                <span>我的消息</span>
            </div>
            <div>
                <van-icon size="18" name="" />
                <span>意见反馈</span>
            </div>
            <div>
                <van-icon size="18" name="" />
                <span>在线客服</span>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "demo", // 组件参数 接收来自父组件的数据
  props: [],
  components: {},
  data() {
    return {
      userInfo: {}
    };
  },
  computed: {},
  watch: {},
  methods: {
    toSeflInfo(){
      this.$router.push('/selfInfo')
    },
    getUserInfo() {
      this.userInfo = JSON.parse(window.sessionStorage.getItem("user"));
      console.log(this.userInfo);
    }
  },
  beforeCreate() {},
  created() {
    this.getUserInfo();
  },
  beforeMount() {},
  mounted() {}
};
</script> 
<style scoped>
.person {
  width: 100vw;
  min-height: 100%;
  overflow: hidden;
  background: #ffffff;
  padding: 0 20px;
  box-sizing: border-box;
}
.topBg {
  /* position: absolute; */
  width: 500px;
  height: 500px;
  background: #fc5500;
  /* top: 0;
    left: -75px; */
  margin-left: -80px;
  margin-top: -330px;
  border-radius: 50%;
}
.topCard {
  box-shadow: 1px 1px  #ddd;
  /* width: 90%; */
  height: 25%;
  background: #ffffff;
  margin: 0 auto;
  margin-top: -130px;
  border-radius: 10px;
  padding-top: 16px;
  box-sizing: border-box;
}
.topCard > p:nth-of-type(1) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
}
.topCard > p:nth-of-type(1) > span:nth-of-type(1) {
  margin-left: 20px;
  display: flex;
  align-items: center;
}
.topCard > p:nth-of-type(1) > span:nth-of-type(1) > img:nth-of-type(1) {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.topCard > p:nth-of-type(1) > span:nth-of-type(2) {
  padding: 6px;
  background: #eb6100;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  color: white;
}
.mobile {
  margin: 0 6px;
}
.message {
  display: flex;
  justify-content: space-between;
  background: #ffffff;
}
.message > span {
  border-left: 2px solid #ddd;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.message > span:nth-of-type(1) {
  border-left: none;
}
.message > span > p:nth-of-type(1) {
  font-size: 26px;
  color: #eb6100;
  font-weight: bold;
}
.message > span > p:nth-of-type(3) {
  color: #b7b7b7;
  font-size: 8px;
}
.centerLink{
    margin: 0 auto;
    margin-top: 20px;
    /* width: 90%; */
    height:6%;
    background: red;
    border-radius: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: white;
}
.item{
    border-bottom: 1px solid #eee;
    padding: 20px 0;
}
.item>p:nth-of-type(1){
    font-size: 16px;
    margin-bottom: 20px;
}
.item>div{
    display: flex;
}
.item>div>div{
    display: flex;
    width: 25%;
    flex-direction: column;
    align-items: center;
}
.item>div>div>span{
    margin-top: 6px;
}
</style>
